<template>
  <div class="shop">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="shopForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="customerName" label="经销商">
            <el-input v-model="formData.customerName" placeholder="请输入经销商" clearable />
          </el-form-item>
          <el-form-item prop="shopCode" label="门店编码">
            <el-input v-model="formData.shopCode" clearable placeholder="请输入门店编码" />
          </el-form-item>
          <el-form-item prop="shopName" label="门店名称">
            <el-input v-model="formData.shopName" clearable placeholder="请输入门店名称" />
          </el-form-item>
          <el-form-item prop="shopAddr" label="门店地址">
            <el-input v-model="formData.shopAddr" clearable placeholder="请输入门店地址" />
          </el-form-item>
          <el-form-item prop="businessType" label="业务类型">
            <CustomDictSelect
              placeholder="请选择业务类型"
              dict-type-code="SHOP_BUSINESS_TYPE"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.businessType"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="businessStatus" label="营业状态">
            <CustomDictSelect
              placeholder="请选择营业状态"
              dict-type-code="OPERATING_STATUS"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.businessStatus"
              multiple
              collapse-tags
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item :span="12" align="left">
            <Button @click="resetClick('shopForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('shopForm')">查询</Button>
            <span style="color: red; position: absolute; left: 130px; bottom: -8px;">
              (提示:门店名称、经销商、门店地址三选一为查询必要条件)
            </span>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div style="text-align:right">
        <Button type="primary" @click="$refs.shopTable.showSetting = true">设置表格样式</Button>
      </div>
      <table-box ref="shopTable" no-request :table-config="shopTableConfig" />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import CustomDictSelect from '@/components/CustomDictSelect'
import { JsonToUrl } from '@/utils/params-format'
import { deepCopy } from '@/utils'
const customerName = { required: true, message: ' ', trigger: 'change' }
const shopName = { required: true, message: ' ', trigger: 'change' }
const shopAddr = { required: true, message: ' ', trigger: 'change' }
export default {
  name: 'InfoDataShop',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    CustomDictSelect
  },
  data() {
    return {
      formData: {
        shopCode: '', // 门店编码
        shopName: '', // 门店名称
        customerName: '', // 经销商
        shopAddr: '', // 门店地址
        businessType: '', // 门店类型
        businessStatus: [] // 营业状态
      },
      formRules: {
        customerName: {},
        shopName: {},
        shopAddr: {}
      },
      url: '/call-center/api/v1/mscInfo/shop/page',
      shopTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'shopCode',
            label: '门店编码',
            width: 100
          }, {
            prop: 'shopName',
            label: '门店名称',
            width: 100
          }, {
            prop: 'shopInfoPhone',
            label: '门店电话',
            width: 100,
            formatData: (val) => { return val.shopInfoPhone ? val.shopInfoPhone : '--' }
          }, {
            prop: 'description',
            label: '业务类型',
            width: 120
          }, {
            prop: 'shopNatureName',
            label: '门店性质',
            width: 100,
            formatData: (val) => { return val.shopNatureName ? val.shopNatureName : '--' }
          }, {
            prop: 'shopClassifyName',
            label: '门店类型',
            width: 100,
            formatData: (val) => { return val.shopClassifyName ? val.shopClassifyName : '--' }
          }, {
            prop: 'businessStatus',
            label: '营业状态',
            width: 100,
            propEnum: {
              dictTypeCode: 'OPERATING_STATUS',
              appCode: 'call-center',
              domainCode: 'marketing'
            }
          }, {
            prop: 'operateArea',
            label: '面积'
          }, {
            prop: 'shopAddr',
            label: '门店地址',
            width: 150
          }, {
            prop: 'customerName',
            label: '经销商',
            width: 120
          }, {
            prop: 'contact',
            label: '联系人',
            width: 90,
            formatData: (val) => { return val.contact ? val.contact : '--' }
          }, {
            prop: 'contactPhone',
            label: '联系电话',
            width: 120,
            formatData: (val) => { return val.contactPhone ? val.contactPhone : '--' }
          }, {
            prop: 'debutOpenTime',
            label: '开业时间',
            width: 120,
            formatData: (val) => { return val.debutOpenTime ? val.debutOpenTime : '--' }
          }, {
            prop: 'stopTime',
            label: '停止时间',
            width: 120,
            formatData: (val) => { return val.stopTime ? val.stopTime : '--' }
          }
        ]
      }
    }
  },
  watch: {
    'formData.customerName': {
      handler(v) {
        if (v) {
          Object.assign(this.formRules, { shopName: {}, shopAddr: {}})
          setTimeout(() => { this.$refs['shopForm'].validateField(['shopName', 'shopAddr']) }, 0)
        }
      }
    },
    'formData.shopName': {
      handler(v) {
        if (v) {
          Object.assign(this.formRules, { customerName: {}, shopAddr: {}})
          setTimeout(() => { this.$refs['shopForm'].validateField(['customerName', 'shopAddr']) }, 0)
        }
      }
    },
    'formData.shopAddr': {
      handler(v) {
        if (v) {
          Object.assign(this.formRules, { customerName: {}, shopName: {}})
          setTimeout(() => { this.$refs['shopForm'].validateField(['customerName', 'shopName']) }, 0)
        }
      }
    }
  },
  created() {
    // OPERATING_STATUS 营业状态
    // SHOP_TYPE 门店类型
    this.shopTableConfig.interfacePath = this.url
  },
  mounted() {},
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      if (this.formData.customerName === '' && this.formData.shopName === '' && this.formData.shopAddr === '') {
        this.$message({
          message: '门店名称、经销商、门店地址三选一为查询必要条件',
          type: 'error'
        })
        Object.assign(this.formRules, { customerName, shopName, shopAddr })
        setTimeout(() => { this.$refs[formName].validateField(['customerName', 'shopName', 'shopAddr']) }, 0)
      } else {
        Object.assign(this.formRules, { customerName: {}, shopName: {}, shopAddr: {}})
        setTimeout(() => { this.$refs[formName].validateField(['customerName', 'shopName', 'shopAddr']) }, 0)
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const d = deepCopy(this.formData)
          d.businessStatus = d.businessStatus === '' ? '' : d.businessStatus.join(',')
          const shopParamsStr = JsonToUrl(d)
          this.shopTableConfig.interfacePath = `${this.url}${shopParamsStr}`
          this.$nextTick(() => {
            this.$refs.shopTable.initTableData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetClick(formName) {
      Object.keys(this.formData).forEach(key => {
        this.$set(this.formData, key, '')
      })
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.shop {}
</style>
